---
title: 개발자 도구 모음
description: Astro의 개발자 도구 모음 사용 가이드
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";

개발 서버가 실행되는 동안 Astro는 로컬 브라우저 미리보기의 모든 페이지 하단에 개발자 도구 모음을 포함합니다.

이 도구 모음에는 개발 중에 사이트를 디버깅하고 검사하는 데 유용한 여러 도구가 포함되어 있으며, 통합 디렉터리에서 [더 많은 개발자 도구 모음 앱을 찾아 확장](#개발자-도구-모음-확장)할 수 있습니다. [개발자 도구 모음 API](/ko/reference/dev-toolbar-app-reference/)를 사용하여 [나만의 도구 모음 앱을 빌드](/ko/recipes/making-toolbar-apps/)할 수도 있습니다!

이 도구 모음은 기본적으로 활성화되어 있으며 페이지 하단으로 마우스를 가져가면 나타납니다. 이 도구는 개발자 도구일 뿐이며 게시된 사이트에는 나타나지 않습니다.

## 내장 앱

### Astro Menu

Astro Menu 앱은 현재 프로젝트에 대한 다양한 정보와 추가 리소스 링크에 쉽게 액세스할 수 있도록 도와줍니다. 특히 Astro 문서, GitHub 리포지토리 및 Discord 서버에 대한 원클릭 액세스를 제공합니다.

이 앱에는 [`astro info`](/ko/reference/cli-reference/#astro-info) 명령을 실행하고 출력을 클립보드에 복사하는 "Copy debug info" 버튼도 포함되어 있습니다. 이는 도움을 요청하거나 문제를 보고할 때 유용할 수 있습니다.

### Inspect

Inspect 앱은 현재 페이지의 모든 [아일랜드](/ko/concepts/islands/)에 대한 정보를 제공합니다. 각 아일랜드에 전달된 속성과 렌더링하는 데 사용되는 클라이언트 지시어를 보여줍니다.

### Audit

Audit 앱은 현재 페이지에서 일련의 감사를 자동으로 실행하여 가장 일반적인 성능 및 접근성 문제를 확인합니다. 문제가 발견되면 도구 모음에 빨간색 점이 나타납니다. 앱을 클릭하면 감사 결과 목록이 나타나고 페이지에서 관련 요소를 직접 강조 표시합니다.

:::note
개발자 도구 모음에서 수행하는 기본 성능 및 접근성 감사는 [Pa11y](https://pa11y.org/) 또는 [Lighthouse](https://developers.google.com/web/tools/lighthouse)와 같은 전용 도구나, 또는 더 나아가 사람을 대체할 수 없습니다!

개발자 도구 모음은 개발 중에 발생하는 일반적인 문제를 빠르게 쉽게 포착하여 다른 도구로 컨텍스트를 전환할 필요가 없도록 하는 것을 목표로 합니다.
:::

### Settings

Settings 앱을 사용하면 자세한 로깅, 알림 비활성화, 화면에서의 배치 조정과 같은 개발자 도구 모음에 대한 옵션을 구성할 수 있습니다.

## 개발자 도구 모음 확장

Astro 통합은 개발자 도구 모음에 새 앱을 추가하여 프로젝트를 위한 사용자 정의 도구로 확장할 수 있습니다. [통합 디렉터리](https://astro.build/integrations/?search=&categories%5B%5D=toolbar)에서, 또는 [Astro Menu](#astro-menu)를 사용하여 더 많은 개발자 도구 앱을 찾아 설치할 수 있습니다.

자체 설치 지침에 따라 다른 [Astro 통합](/ko/guides/integrations-guide/)과 마찬가지로 프로젝트에 추가 개발자 도구 모음 앱 통합을 설치하세요.

<RecipeLinks slugs={["ko/recipes/making-toolbar-apps"]} />

## 개발자 도구 모음 비활성화

개발자 도구 모음은 모든 사이트에 대해 기본적으로 활성화되어 있습니다. 필요에 따라 개별 프로젝트 및/또는 사용자에 대해 비활성화하도록 선택할 수 있습니다.

### 프로젝트별

프로젝트에서 작업하는 모든 사용자에 대해 개발자 도구 모음을 비활성화하려면 [Astro 구성 파일](/ko/reference/configuration-reference/#devtoolbarenabled)에서 `devToolbar: false`를 설정하세요.

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
});
```

개발자 도구 모음을 다시 활성화하려면 구성에서 이 줄을 제거하거나 `enabled: true`로 설정하세요.

### 사용자별

특정 프로젝트에서 자신의 개발자 도구 모음을 비활성화하려면 [`astro preferences`](/ko/reference/cli-reference/#astro-preferences) 명령을 실행하세요.

```shell
astro preferences disable devToolbar
```

현재 기기의 사용자에 대한 모든 Astro 프로젝트에서 개발자 도구 모음을 비활성화하려면 `astro-preferences`를 실행할 때 `--global` 플래그를 추가하세요.

```shell
astro preferences disable --global devToolbar
```

개발자 도구 모음은 다음 명령으로 나중에 활성화할 수 있습니다.

```shell
astro preferences enable devToolbar
```
